<template>
  <div v-if="current == 1"
       class="relative flex gap-0 flex1 flex-col pt-5  md:flex-row items-center justify-center"
       :style="contStyle">
    <!-- 左栏 -->
    <div class="half relative flex-1" v-if="isLeftVisible">
      <!-- mobile隐藏图标 -->
      <div class="w-full h-8 relative hidden md:flex">
        <div v-if="isRightVisible"
             class=" absolute cursor-pointer  right-4"
             @click="hideRight">
          <n-icon>
            <OpenOutline />
          </n-icon>
        </div>
        <div v-else
             class="absolute cursor-pointer  right-4"
             @click="showRight">
          <n-icon style="transform: scaleX(-1)">
            <OpenOutline />
          </n-icon>
        </div>
      </div>
      <n-scrollbar :style="contStyle">
        <div 
             class="relative flex-1  p-4 pt-0 rounded-lg ">

          <!-- 内容 -->
          <div class="flex justify-between items-center">
            <h2 class="text-lg font-bold">Left Section</h2>
          </div>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
        </div>
      </n-scrollbar>
    </div>
    <!-- 竖线 -->
    <!-- <div v-if="isLeftVisible && isRightVisible"
         class="w-1 bg-gray-300"></div> -->
    <!-- 右栏 -->
    <div class="half relative flex-1" v-if="isRightVisible">
      <!-- mobile隐藏图标 -->
      <div class="hidden md:flex">
        <div v-if="isLeftVisible"
             class="absulute cursor-pointer"
             @click="hideLeft">
          <n-icon style="transform: scaleX(-1)">
            <OpenOutline />
          </n-icon>
        </div>
        <div v-else
             class="absulute  cursor-pointer "
             @click="showLeft">
          <n-icon>
            <OpenOutline />
          </n-icon>
        </div>
      </div>
      <n-scrollbar :style="contStyle">
        <div 
             class="flex-1  p-4 pt-0 rounded-lg ">

          <!-- 内容 -->
          <div class="flex justify-between items-center">
            <h2 class="text-lg font-bold">Right Section</h2>
          </div>
          <p class="h-30 border-1">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
          <p class="h-30">This is the left section content.</p>
        </div>
      </n-scrollbar>
    </div>
  </div>
</template>


<script lang="ts" setup>
import {
  NSplit,
  NIcon,
  NEquation,
  NButton,
  NModal,
  NScrollbar,
} from "naive-ui";
import { OpenOutline } from "@vicons/ionicons5";
import { ref, computed, onMounted } from "vue";
import { defineProps } from "vue";
import { useAppStore, useUserStore } from "@/store";

// 定义响应式变量，控制左右两栏的显示状态
const isLeftVisible = ref(true);
const isRightVisible = ref(true);

const props = defineProps<{
  current: number;
}>();

const appStore = useAppStore();

const contStyle = computed(() => {
  let height = {};
  if (appStore.sectionHeaderShow) {
    height = {
      maxHeight: "calc(100vh - 160px)",
    };
  } else {
    height = {
      maxHeight: "calc(100vh - 80px)",
    };
  }
  console.log("style:", height);
  return height;
});

// 隐藏左栏
const hideLeft = () => {
  isLeftVisible.value = false;
};
const showLeft = () => {
  isLeftVisible.value = true;
};
// 隐藏右栏
const hideRight = () => {
  isRightVisible.value = false;
};
const showRight = () => {
  isRightVisible.value = true;
};
</script>
<style lang="less" scoped>

</style>